<!-- 列表分类 -->
<template>
    <div class="new-classify" :style="boxStyle">
        <template v-if="customFeature.classifyType === 1">
            <ul
                :style="{
                    height: element.eles.style.height,
                    color: element.eles.style.color
                }"
                :class="{
                    'mode-1': customFeature.mode === 0
                }"
                class="type-1 second-mode"
            >
                <template v-if="customFeature.selectClassifyType === 1 && customFeature.classifyGroupId === '0'">
                    <template v-if="!customFeature.showAllClassify">
                        <li class="item" :style="{
                            height: element.eles.style.height,
                            lineHeight: element.eles.style['line-height']
                        }">
                            <span class="title">全部</span>
                        </li>
                    </template>
                    <template v-for="(item, index) in (customFeature.mode === 2 ? 3 : 6)" :key="index">
                        <li
                            :class="{
                                'selected': index === 0
                            }"
                            :style="{
                                height: element.eles.style.height,
                                lineHeight: element.eles.style['line-height']
                            }"
                            class="item"
                        >
                            <span class="title" :style="index === 0 ? {
                                fontSize: element.eles.classifyStyle.selectedFontSize,
                                fontWeight: element.eles.classifyStyle.selectedFontWeight,
                                fontStyle: element.eles.classifyStyle.selectedFontStyle,
                                textDecoration: element.eles.classifyStyle.selectedTextDecoration
                            } : {}">
                                分类0{{ index + 1 }}
                            </span>
                            <template v-if="customFeature.isShowUnderLine && (index === 0)">
                                <span class="underLine" :style="{
                                    width: element.eles.classifyStyle.underLineWidth,
                                    backgroundColor: element.eles.classifyStyle.selectedColor
                                }"></span>
                            </template>
                        </li>
                    </template>
                    <template v-if="customFeature.mode === 2">
                        <li class="item mode-icon" :style="{
                            backgroundColor: element.eles.style['background-color']
                        }">
                            <img v-if="!!customFeature.horizontalImageSrc" :src="customFeature.horizontalImageSrc" class="icon-container" />
                            <div v-else>更多</div>
                        </li>
                    </template>
                </template>
                <template v-else>
                    <template v-for="(item, index) in customFeature.classifyList" :key="index">
                        <li
                            :class="{
                                'selected': index === 0
                            }"
                            :style="{
                                height: element.eles.style.height,
                                lineHeight: element.eles.style['line-height']
                            }"
                            class="item"
                        >
                            <span class="title" :style="index === 0 ? {
                                fontSize: element.eles.classifyStyle.selectedFontSize,
                                fontWeight: element.eles.classifyStyle.selectedFontWeight,
                                fontStyle: element.eles.classifyStyle.selectedFontStyle,
                                textDecoration: element.eles.classifyStyle.selectedTextDecoration
                            } : {}">
                                {{ item.name }}
                            </span>
                            <template v-if="customFeature.isShowUnderLine && (index === 0)">
                                <span class="underLine" :style="{
                                    width: element.eles.classifyStyle.underLineWidth,
                                    backgroundColor: element.eles.classifyStyle.selectedColor
                                }"></span>
                            </template>
                        </li>
                    </template>
                    <template v-if="customFeature.mode === 2">
                        <li class="item mode-icon" :style="{
                            backgroundColor: element.eles.style['background-color']
                        }">
                            <img v-if="!!customFeature.horizontalImageSrc" :src="customFeature.horizontalImageSrc" class="icon-container" />
                            <div v-else>更多</div>
                        </li>
                    </template>
                </template>
            </ul>
        </template>
        <template v-else-if="customFeature.classifyType === 2">
            <ul
                :style="{
                    height: element.eles.style.height,
                    color: element.eles.style.color
                }"
                class="type-2 new-classify-second"
            >
                <template v-if="customFeature.selectClassifyType === 1 && customFeature.classifyGroupId === '0'">
                    <template v-if="!customFeature.showAllClassify">
                        <li class="item" :style="{
                            height: element.eles.style.height,
                            lineHeight: element.eles.style['line-height']
                        }">
                            <span class="title">全部</span>
                            <span :class="{
                                'triangle': customFeature.mode === 0,
                                'triangle2': customFeature.mode === 1
                            }"></span>
                            <span class="divide-line" :style="{
                                borderColor: element.eles.classifyStyle.divideLineColor
                            }"></span>
                        </li>
                    </template>
                    <template v-for="(item, index) in 6" :key="index">
                        <li
                            :style="{
                                height: element.eles.style.height,
                                lineHeight: element.eles.style['line-height']
                            }"
                            :class="{
                                'selected': index === 0
                            }"
                            class="item"
                        >
                            <span class="title" :style="index === 0 ? {
                                color: customFeature.selectedColor,
                                fontSize: element.eles.classifyStyle.selectedFontSize,
                                fontWeight: element.eles.classifyStyle.selectedFontWeight,
                                fontStyle: element.eles.classifyStyle.selectedFontStyle,
                                textDecoration: element.eles.classifyStyle.selectedTextDecoration
                            } : {}">
                                分类0{{ index + 1 }}
                            </span>
                            <span
                                :style="customFeature.mode === 0 ? {
                                    borderTopColor: index === 0 ? customFeature.selectedColor : ''
                                } : {
                                    borderColor: index === 0 ? customFeature.selectedColor : ''
                                }"
                                :class="{
                                    'triangle': customFeature.mode === 0,
                                    'triangle2': customFeature.mode === 1
                                }"
                            ></span>
                            <span class="divide-line" :style="{
                                borderColor: element.eles.classifyStyle.divideLineColor
                            }"></span>
                        </li>
                    </template>
                </template>
                <template v-else>
                    <template v-for="(item, index) in customFeature.classifyList" :key="index">
                        <li
                            :style="{
                                height: element.eles.style.height,
                                lineHeight: element.eles.style['line-height']
                            }"
                            :class="{
                                'selected': index === 0
                            }"
                            class="item"
                        >
                            <span class="title" :style="index === 0 ? {
                                color: customFeature.selectedColor,
                                fontSize: element.eles.classifyStyle.selectedFontSize,
                                fontWeight: element.eles.classifyStyle.selectedFontWeight,
                                fontStyle: element.eles.classifyStyle.selectedFontStyle,
                                textDecoration: element.eles.classifyStyle.selectedTextDecoration
                            } : {}">
                                {{ item.name }}
                            </span>
                            <span
                                :style="customFeature.mode === 0 ? {
                                    borderTopColor: index === 0 ? customFeature.selectedColor : ''
                                } : {
                                    borderColor: index === 0 ? customFeature.selectedColor : ''
                                }"
                                :class="{
                                    'triangle': customFeature.mode === 0,
                                    'triangle2': customFeature.mode === 1
                                }"
                            ></span>
                            <span class="divide-line" :style="{
                                borderColor: element.eles.classifyStyle.divideLineColor
                            }"></span>
                        </li>
                    </template>
                </template>
            </ul>
        </template>
    </div>
</template>

<script>
import { defineComponent, toRefs, computed } from 'vue'
export default defineComponent({
    name: 'WidgetNewClassify',
    props: {
        element: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props, { emit }) {
        const { element } = toRefs(props)

        const customFeature = computed(() => element.value.eles.customFeature || {})

        const boxStyle = computed(() => {
            const style = element.value.eles.style || {}
            return {
                opacity: style.opacity,
                height: style.height,
                lineHeight: style['line-height'],
                fontSize: style['font-size'],
                fontWeight: style['font-weight'],
                fontStyle: style['font-style'],
                marginTop: style['margin-top'],
                backgroundColor: style['background-color']
            }
        })
        
        return {
            element,
            customFeature,
            boxStyle
        }
    }
})
</script>

<style lang="less" scoped>
@import './widget-new-classify.less';
</style>